<template>
  <div class="location">
    <div class="introduction">
      <div class="info-location">
        <van-tag class="tag" type="danger">呼和浩特市</van-tag>
      </div>
      <span class="info-time">截至 {{ getTime }} 地区卫健委统计</span>
    </div>
    <div class="info-count">
      <Count
        v-for="(item, index) in countInfo"
        :key="index"
        :title="item.title"
        :count="item.count"
        :incr="item.incr"
        :color="item.color"
      ></Count>
    </div>
    <Localreport :info="caseInfo"></Localreport>
    <div class="btn-group">
      <van-button
        type="info"
        size="small"
        plain
        round
        block
        @click="community()"
      >
        新冠小区查询
      </van-button>
      <van-button
        type="info"
        size="small"
        plain
        round
        block
        @click="distribution()"
      >
        病例分布查询
      </van-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import dayjs from 'dayjs'
import Count from '@/components/Index-Container/case-information/components/Count'
import Localreport from '@/components/Index-Container/localcase/components/Localreport'

export default {
  name: 'Location',
  components: { Count, Localreport },
  data() {
    const countInfo = [
      {
        title: '确诊',
        count: 0,
        incr: 0,
        color: '#f74c31'
      },
      {
        title: '死亡',
        count: 0,
        incr: 0,
        color: '#5d7092'
      },
      {
        title: '治愈',
        count: 0,
        incr: 0,
        color: '#28b7a3'
      }
    ]

    const caseInfo = [
      {
        name: '新城区',
        confirmedCount: 0,
        deadCount: 0,
        curedCount: 0
      },
      {
        name: '赛罕区',
        confirmedCount: 0,
        deadCount: 0,
        curedCount: 0
      },
      {
        name: '玉泉区',
        confirmedCount: 0,
        deadCount: 0,
        curedCount: 0
      },
      {
        name: '回民区',
        confirmedCount: 0,
        deadCount: 0,
        curedCount: 0
      },
      {
        name: '土默特左旗',
        confirmedCount: 0,
        deadCount: 0,
        curedCount: 0
      },
      {
        name: '托克托县',
        confirmedCount: 0,
        deadCount: 0,
        curedCount: 0
      },
      {
        name: '和林格尔县',
        confirmedCount: 0,
        deadCount: 0,
        curedCount: 0
      },
      {
        name: '清水河县',
        confirmedCount: 0,
        deadCount: 0,
        curedCount: 0
      },
      {
        name: '武川县',
        confirmedCount: 0,
        deadCount: 0,
        curedCount: 0
      }
    ]

    return {
      countInfo: countInfo,
      caseInfo: caseInfo
    }
  },
  computed: {
    ...mapState(['desc', 'case']),
    getTime() {
      return dayjs(this.desc.modifyTime).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {
    community() {
      window.location.href = 'https://ncov.html5.qq.com/community?channelid=17'
    },
    distribution() {
      this.$toast('功能开发中，即将上线...')
    }
  }
}
</script>

<style lang="scss" scoped>
.location {
  width: 100%;
  min-height: 600px;
  padding: 2% 3.5%;
  background: #fff;

  .introduction {
    width: 100%;
    height: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .info-location {
      height: 22px;
      font-size: 100%;
      font-weight: bold;
    }

    .info-time {
      flex-grow: 1;
      height: 100%;
      font-size: 80%;
      line-height: 180%;
      text-align: right;
    }
  }

  .info-count {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2% 0;
  }

  .btn-group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 2% 0;

    button {
      width: 48%;
      height: 40px;
      font-size: 100%;
      font-weight: bold;
    }
  }
}
</style>
